<template>
    <div class="big1">
        <span class="t">我的频道</span>
        <div class="big">

            <div class="fox" v-for="(v,i) in arr" :key="i">
                <div class="top">
                    <span>{{v.top}}</span>
                    <span class="two">{{v.top2}}</span>
                </div>
                <div class="middle">
                    <img :src="v.img" alt="">
                </div>
                <div class="bottom">
                    <span>{{v.left}}</span>
                    <span>{{v.right}}</span>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
import getLink from "@/api/getindex.js"
export default {
data(){
    return{
        arr:[]
    }
},
    created(){
    getLink("/mock/data/my").then(res => {
    this.arr =res.data;
    })
}
}

</script>

<style scoped>
    .two{
        font-size: 0.2rem;
    }
    .bottom{
        width: 100%;
         display: flex;
         justify-content: space-around;
         padding: 3% 0;
    }
    .middle{
        width: 100%;
        margin: 0 0 0 12%;
       
    }
    img{
        width: 75%;
        border-radius: 0.2rem;
    }
    .top{
        width: 100%;
        display: flex;
        flex-direction:column;
        padding: 3%;
    }
    .top span{
        margin: 2% 0;
    }
    .fox{
        width: 46%;
        /* background-color: pink; */
    }
    .big{
        width: 96%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .t{
        width: 100%;
        margin: 2%;
    }
    .big1{
        width: 100%;
        margin-bottom: 20%;
    }
</style>
